<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <title>山海夭华-首页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/indexcss.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/upubliccss.css">
    <script src="${pageContext.request.contextPath }/js/jquery-1.10.2.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/form.js"></script><!--此文件要放在jquery下方-->
    <script src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/kanbanniang/waifu.css"/>
</head>
<body>
<!--抛锚点-->
<div id="head" class="class">
    <%@ include file="/page/header.html" %>
</div>
<img class="header-img" src="${pageContext.request.contextPath }/images/lastbg.png">
<!--data-ride="carousel"设置自动轮播 data-interval="2000"为轮播间隔2秒-->
<%--<div id="myCarousel" class="carousel slide height-style" data-ride="carousel" data-interval="3000">--%>
<%--    <!-- 轮播指标 -->--%>
<%--    <ol class="carousel-indicators">--%>
<%--        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>--%>
<%--        <li data-target="#myCarousel" data-slide-to="1"></li>--%>
<%--        <li data-target="#myCarousel" data-slide-to="2"></li>--%>
<%--    </ol>--%>
<%--    <!-- 轮播项目 -->--%>
<%--    <div class="carousel-inner bg-height">--%>
<%--        <div class="item active"></div>--%>
<%--        <div class="item"></div>--%>
<%--        <div class="item"></div>--%>
<%--    </div>--%>
<%--    <!-- 轮播导航 -->--%>
<%--    <a class="left carousel-control2" href="#myCarousel" role="button" data-slide="prev">--%>
<%--        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>--%>
<%--        <span class="sr-only">Previous</span>--%>
<%--    </a>--%>
<%--    <a class="right carousel-control2" href="#myCarousel" role="button" data-slide="next">--%>
<%--        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"--%>
<%--              style="left: 0;transform: translate(25%,-50%);"></span>--%>
<%--        <span class="sr-only">Next</span>--%>
<%--    </a>--%>
<%--    <div class="float-img"><img src="${pageContext.request.contextPath }/images/bottom_arrow_normal.png"--%>
<%--                                class="bottom-img"></div>--%>
<%--</div>--%>

<!--热门商品展示-->
<div class="container-fluid" style="margin-top: 80px;">
    <div class="goto" id="goto"></div>
    <!--模块一-->
    <h1 class="text-center" style="font-family:STXingkai">热门</h1>
    <div class="row row1 text-center get_ele">
        <div class="col-lg-6">
            <a href="#" class="a1_img">
                <img src="${pageContext.request.contextPath }/images/infor.png" alt="图片">
            </a>
        </div>
        <div class="col-lg-6">
            <!--内嵌列-->
            <div class="row row2 text-center">
                <div class="col-lg-12">
                    <a href="#" class="a2_img">
                        <img src="${pageContext.request.contextPath }/images/infor.png" alt="图片">
                    </a>
                </div>
                <div class="col-lg-12 a2_margin">
                    <a href="#" class="a2_img">
                        <img src="${pageContext.request.contextPath }/images/infor.png" alt="图片">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--模块二-->
    <div class="row center-content" style="padding-bottom: 80px">
        <%--<img src="" alt="图片">--%>
        <h1 class="text-center" style="font-family:STXingkai">"所爱隔山海，山海不可平</h1>
        <p class="text-center"></p>
<%--        <div class="col-lg-4">--%>
<%--            <img alt="图片" src="${pageContext.request.contextPath }/images/1.jpg" width="100%">--%>
<%--        </div>--%>
<%--        <div class="col-lg-4 margin-div">--%>
<%--            <img alt="图片" src="${pageContext.request.contextPath }/images/2.jpg" width="100%">--%>
<%--        </div>--%>
<%--        <div class="col-lg-4">--%>
<%--            <img alt="图片" src="${pageContext.request.contextPath }/images/3.jpg" width="100%">--%>
<%--        </div>--%>
<%--        <div class="col-lg-4" style="margin-top: 30px">--%>
<%--            <img alt="图片" src="${pageContext.request.contextPath }/images/4.jpg" width="100%">--%>
<%--        </div>--%>
<%--        <div class="col-lg-4" style="margin-top: 30px">--%>
<%--            <img alt="图片" src="${pageContext.request.contextPath }/images/5.jpg" width="100%">--%>
<%--        </div>--%>
<%--        <div class="col-lg-4" style="margin-top: 30px">--%>
<%--            <img alt="图片" src="${pageContext.request.contextPath }/images/6.jpg" width="100%">--%>
<%--        </div>--%>
    </div>
</div>

<!--锚点-->
<div class="float text-center">
    <a href="#head" title="回到顶部"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="waifu">
    <div class="waifu-tips"></div>
    <canvas id="live2d" class="live2d"></canvas>
    <div class="waifu-tool">
        <span class="fui-home"></span>
        <span class="fui-chat"></span>
        <span class="fui-eye"></span>
        <span class="fui-user"></span>
        <span class="fui-photo"></span>
        <span class="fui-info-circle"></span>
        <span class="fui-cross"></span>
    </div>
</div>
<!--公共版权文件以include方式引入-->
<div class="footer-page">
    <%@ include file="/page/footer.html" %>
</div>
<script src="${pageContext.request.contextPath }/kanbanniang/waifu-tips.js"></script>
<script src="${pageContext.request.contextPath }/kanbanniang/live2d.js"></script>

<script type="text/javascript">
    live2d_settings['modelId'] = 1;
    live2d_settings['modelTexturesId'] = 87;
    initModel("${pageContext.request.contextPath }/kanbanniang/waifu-tips.json")
</script>


<script src="${pageContext.request.contextPath }/js/publicjs.js"></script>
<script>
    $(function () {
        var $img = $(".get_ele img");
        var $a = $(".get_ele a");
        $.ajax({
            url: "${pageContext.servletContext.contextPath}/product/getHotList",
            success: function (date) {
                console.log(date.my_pro_list[1]);
                for (var i = 0; i < date.my_pro_list.length; i++) {
                    var obj = date.my_pro_list[i];
                    $img.eq(i).attr("src", "${pageContext.servletContext.contextPath}/statics/upprodectimg/" + obj.pimg);
                    $a.eq(i).attr("href", "${pageContext.servletContext.contextPath}/product/productinfo?pid=" + obj.pid);
                }
            }
        })
    })
</script>
</body>
</html>